<template>
	<view class="x-wrapper">
		<view class="bind-box">
			<text class="bind-text1">绑定手机号</text>
			<text class="bind-text2">绑定手机号以便我们为您提供更好地服务</text>
			<view class="form-box">
				<view class="form-input1">
					<u-input prefixIcon="+86" prefixIconStyle="color:#333;font-size: 15px" placeholder="请输入您的手机号"
						type="number" border="none" :clearable="true" fontSize="28rpx" color="#333"
						placeholderStyle="color:#9AA2B7" maxlength="11" v-model="phoneNumber" class="f-input"></u-input>
				</view>
				<view class="form-input">
					<u-input placeholder="请输入验证码" type="number" border="none" :clearable="true" fontSize="28rpx"
						color="#333" placeholderStyle="color:#9AA2B7" maxlength="6" v-model="code" class="f-input">
						<template slot="suffix">
							<!-- <view class="yanzhengbtn" @click="getCode">获取验证码</view> -->
							<view class="yanzhengbtn">
								<u-text size="28rpx" color="#386FFF" :text="tips" @click="getCode" bold
									lineHeight="90rpx">
								</u-text>
							</view>

						</template>
					</u-input>
					<image class="yazhengma" src="../../static/images/yanzhengma.png" alt=""></image>
				</view>
				<view class="btn-box">
					<view class="btn">
						<u-button text="确定" :hairline="false" :customStyle="commonBtnStyle" color="#386FFF"
							@click="getBing"></u-button>
					</view>
				</view>
			</view>
		</view>

		<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" changeText="Xs" startText="获取验证码"
			endText="重新发送" @change="codeChange"></u-code>
	</view>
</template>

<script>
	import {
		sendCode
	} from '@/common/api.js'
	export default {
		data() {
			return {
				phoneNumber: '',
				code: '',
				tips: '',
				seconds: 60,
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.phoneNumber == '') {
					this.$u.toast('手机号码不能为空');
					return
				}
				if (this.$u.test.mobile(this.phoneNumber)) {

					if (this.$refs.uCode.canGetCode) {
						const res = await sendCode({
							params: {
								phone: this.phoneNumber,
								type: 'login'
							}
						})
						// console.log('res', res)
						this.$u.toast('发送成功');
						this.$refs.uCode.start();
						// this.showToast = true;
						// 通知验证码组件内部开始倒计时

						// setTimeout(() => {
						// 	this.$refs.uCode.start();
						// 	this.$u.toast('发送成功')
						// }, 1000)
					} else {
						this.$u.toast('倒计时结束后再发送');
					}

				} else {
					this.$u.toast('手机号码格式有误');
				}


			},
			end() {
				// this.$u.toast('倒计时结束');
			},
			start() {
				// this.$u.toast('倒计时开始');
			},
			getBing() {
				if (!this.phoneNumber) {
					this.$u.toast('手机号码不能为空');
					return
				}
				if (this.$u.test.mobile(this.phoneNumber)) {
					if (!this.code) {
						this.$u.toast('短信验证码不能为空');
						return
					}
					if (this.$u.test.code(this.code, 6)) {
						if (this.authArray.length == 0) {
							this.$u.toast('请勾选服务协议和隐私政策');
							return
						}
						// todo
						let params = {
							phoneNumber: this.phoneNumber,
							code: this.code,
							// userType: 10,
							clientType: 1
						}
						login(params).then(res => {
							this.$u.toast(res.msg);
							uni.setStorageSync('token', res.data)
							this.$store.commit('SET_CURRENTCITY', {})
						})
					} else {
						this.$u.toast('短信验证码格式有误');
					}

				} else {
					this.$u.toast('手机号码格式有误');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bind-box {
		margin-top: 20px;
		padding: 60px 30px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.bind-text1 {
			font-size: 30px;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #386FFF;
			letter-spacing: 4px;
		}

		.bind-text2 {
			font-size: 14px;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #9AA2B7;
			margin-top: 10px;
		}

		.form-box {
			margin-top: 66px;
		}

		/deep/ .u-text__value {
			margin-left: 12px;
		}

		.btn-box {
			margin-top: 65px;
		}

	}

	/deep/.u-button__text {
		font-size: 18px !important;
	}
	
</style>
